<template>
    <div>
        <div class="content-panel">
            <div class="page-title v-center">
                <span>基础信息</span>
                <el-icon class="ml-2 cursor-pointer" @click="startEdit"><Edit /></el-icon>
            </div>
            <infoCard :data="tenant" :fields="showFields"></infoCard>
        </div>

        <div class="content-panel mt-4">
            <div class="page-title">租户应用</div>
            <Apps :tenant="tenant" />
        </div>

        <el-drawer v-model="visible" title="修改租户信息" size="500px">
            <base-form :fields="editFields" v-model="model" labelPosition="top" ref="formRef" />
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="updateTenant">确定</el-button>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import infoCard from "../../../components/show/info-card.vue";
import Apps from "./apps.vue";
import * as _ from "lodash";

const emits = defineEmits(["change"]);
const { tenant } = defineProps({
    tenant: Object,
});
const showFields = [
    { label: "名称", prop: "name" },
    { label: "管理员", prop: "admin.nickname" },
    { label: "类型", prop: "type", converter: (val) => (val == "company" ? "企业" : "个人") },
    { label: "状态", prop: "status", converter: (val) => (val == "valid" ? "有效" : "无效") },
    { label: "证件", prop: "idCard" },
    { label: "联系人", prop: "contactName" },
    { label: "联系电话", prop: "contactPhone" },
    { label: "地址", prop: "address" },
];
const editFields = [
    { label: "租户名称", prop: "name", required: true, unique: true },
    { label: "证件号码", prop: "idCard", required: true },
    { label: "联系人", prop: "contactName" },
    { label: "联系电话", prop: "contactPhone" },
    { label: "地址", prop: "address", type: "textarea", rows: 5 },
];
const visible = ref(false);
const model = ref({});
const formRef = ref();

function startEdit() {
    model.value = _.cloneDeep(tenant);
    visible.value = true;
}

function updateTenant() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https.put("/sys/tenant/update", model.value).then(() => {
            app.success("操作成功");
            visible.value = false;
            emits("change", model.value);
        });
    });
}
</script>

<style lang="scss" scoped></style>
